<template>
  <div><div class="abstatic-height"></div>
    <div class="app-container calendar-list-container">
      <div id="global-uploader">

        <uploader :options="options" @file-success="onFileSuccess" class="uploader-example">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
<!--            <uploader-btn :attrs="attrs">select images</uploader-btn>-->
<!--            <uploader-btn :directory="true">select folder</uploader-btn>-->
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </div>
    </div>
  </div>
</template>

<script>
import {fileMerge} from '@/api/admin/file/index'
export default {
  name: 'upload',
  data() {
    return {
      options: {
        target: 'api/admin/file/upload',
        testChunks: false,
        chunkSize: 1024 * 1024 * 5, // 1MB
        simultaneousUploads: 3, // 并发上传数
        headers: {
          'access-token': 'abcd1234'
        }
      },
      attrs: {
        accept: 'image/*'
      }
    }
  },
  methods: {
    onFileSuccess(rootFile, file, response, chunk) {
      let res = JSON.parse(response);
      // 如果服务端返回需要合并
      if (true) {
        // 文件状态设为“合并中”
        // this.statusSet(file.id, 'merging');
        let param = {
          'filename': rootFile.name,
          'identifier': rootFile.uniqueIdentifier,
          'totalSize': rootFile.size
        }
        fileMerge(param).then(res => {
          // 文件合并成功
          // Bus.$emit('fileSuccess');

          // this.statusRemove(file.id);
        }).catch(e => {
          console.log("合并异常,重新发起请求,文件名为:", file.name)
          //由于网络或服务器原因,导致合并过程中断线,此时如果不重新发起请求,就会进入失败的状态,导致该文件无法重试
          file.retry();
        });

        // 不需要合并
      } else {
        // Bus.$emit('fileSuccess');
        console.log('上传成功');
      }
    },
  },
  created() {
  }
}
</script>

<style scoped>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
